<!--
 * @Author: jiangyg email@jiangyg.com
 * @Date: 2022-11-12 09:37:45
 * @LastEditors: jiangyg email@jiangyg.com
 * @LastEditTime: 2022-11-24 21:36:40
 * @FilePath: /frontend/mall-frontend/src/views/modules/admin/main-header.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-header class="site-header">
    <div class="clearfix">
      <div class="site-header__collapse fl">
        <icon-svg :name="collapseIcon" @click="collapseMenuEvent"></icon-svg>
      </div>
      <div class="site-header__breadcrumb fl">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="menu in breadcrumb" :key="menu.id">{{ menu.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="fr">
        <el-dropdown trigger="click" @command="handleAvatarCommand">
          <span class="el-dropdown-link">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="margin-right: 10px;cursor: pointer;" />
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </el-header>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { computed } from "vue";
import admin from "@/utils/admin";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const store = useStore();

const router = useRouter();

// 设置/获取折叠状态
const collapse = computed({
  get() {
    return store.getters["collapse"];
  },
  set(val) {
    store.commit("collapse", val);
  },
});

// 面包屑
const breadcrumb = computed(() => store.getters["breadcrumb"]);

// 计算折叠图标
const collapseIcon = computed(() => (store.getters["collapse"] ? "double-arrow-right" : "double-arrow-left"));

// 折叠事件
const collapseMenuEvent = () => {
  collapse.value = !collapse.value;
};

// 头像下拉事件处理
const handleAvatarCommand = (command: string | number | object) => {
  // 退出登录
  if (command === 'logout') {
    admin.clearLoginInfo();
    router.replace({ name: 'admin-login' });
    return;
  }
  ElMessage.error('暂不支持指令！');
}
</script>

<style lang="scss">
.site-header {
  padding: 0;
  height: 50px;
  line-height: 50px;
  -webkit-box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);

  .site-header__collapse {
    font-size: 24px;
    padding: 0 15px;
  }

  .site-header__breadcrumb {
    margin-left: 10px;

    span {
      font-size: 14px;
      line-height: 50px;
    }
  }

  svg {
    cursor: pointer;
    margin-top: 13px;
  }
}
</style>
